<p>This rule raises an issue when Angular output bindings (using <code>@Output()</code> decorator or <code>output()</code> function) are named exactly
"on" or start with "on".</p>
<h2>Why is this an issue?</h2>
<p>Angular follows specific naming conventions for component outputs to maintain consistency and avoid confusion.</p>
<p>Outputs named "on" or prefixed with "on" (like <code>onClick</code>, <code>onSubmit</code>) conflict with Angular’s recommended patterns. These
names suggest when something happens rather than what happened, which goes against Angular’s event naming philosophy.</p>
<p>Using "on" prefixes can also create confusion with native DOM event handlers, making code harder to understand and maintain. Angular’s style guide
recommends descriptive event names that clearly indicate the action or state change that occurred.</p>
<h3>What is the potential impact?</h3>
<p>Using improper output naming can lead to confusion between component events and DOM events, making code less readable and harder to maintain. It
also violates Angular’s established conventions, potentially causing issues in team environments where consistent coding standards are important.</p>
<h3>How to fix in Angular?</h3>
<p>Rename outputs to use descriptive names without the "on" prefix. Focus on what happened rather than when it happened.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
@Component()
class MyComponent {
  @Output() onClick = new EventEmitter(); // Noncompliant
  @Output() onSubmit = new EventEmitter(); // Noncompliant
}
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="1" data-diff-type="compliant">
@Component()
class MyComponent {
  @Output() click = new EventEmitter();
  @Output() submit = new EventEmitter();
}
</pre>
<p>For the newer output() function, avoid "on" prefixes in both property names and aliases.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="2" data-diff-type="noncompliant">
@Component()
class MyComponent {
  onClick = output(); // Noncompliant
  change = output({ alias: 'onChange' }); // Noncompliant
}
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="2" data-diff-type="compliant">
@Component()
class MyComponent {
  click = output();
  change = output({ alias: 'change' });
}
</pre>
<p>In component metadata, ensure output declarations don’t use "on" prefixes.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="3" data-diff-type="noncompliant">
@Component({
  outputs: ['onClick', 'onSubmit'] // Noncompliant
})
class MyComponent {}
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="3" data-diff-type="compliant">
@Component({
  outputs: ['click', 'submit']
})
class MyComponent {}
</pre>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/angular-eslint/angular-eslint">Angular ESLint</a> - Rule <a
  href="https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/no-output-on-prefix.md">no-output-on-prefix</a>
  </li>
  <li> Angular Component Outputs Guide - <a href="https://angular.dev/guide/components/outputs">Official Angular documentation on component outputs
  and naming conventions</a> </li>
  <li> Angular Style Guide - Event Names - <a href="https://angular.dev/style-guide#event-names">Angular’s official style guide recommendations for
  event naming</a> </li>
</ul>
